<template>
  <div>
    <div class="title">
      <h1>
        企业列表
        <!-- <el-select
          v-model="areaCode"
          filterable
          clearable
          style="margin-left: 40px"
          @change="getDataList"
          placeholder="请选择城市"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select> -->
      </h1>
      <div class="search_box">
        <div class="search">
          <el-input
            class="import"
            placeholder="输入企业关键字"
            clearable
            v-model="search"
            @change="query"
          >
          </el-input>
          <!-- <button>
            <img
              src="../../assets/image/Vectorintelligentobject_2.png"
              alt=""
            />
          </button> -->
        </div>
        <el-button size="mini" type="primary" @click="query">查询</el-button>
        <!-- <el-button size="mini" type="primary" @click="derive">导出</el-button> -->
      </div>
    </div>
    <el-table
      :data="tableData"
      stripe
      style="background-color: transparent; margin: auto"
      height="31vh"
    >
      <el-table-column prop="num" label="序号" width="50px" align="center">
      </el-table-column>
      <el-table-column
        prop="cityCode"
        label="城市"
        width="100px"
        align="center"
      >
        <template slot-scope="scope">
          <div v-if="scope.row.cityCode == '0851'">贵阳</div>
          <div v-else-if="scope.row.cityCode == '0852'">遵义</div>
          <div v-else-if="scope.row.cityCode == '0853'">安顺</div>
          <div v-else-if="scope.row.cityCode == '0854'">
            黔南
          </div>
          <div v-else-if="scope.row.cityCode == '0855'">
            黔东南
          </div>
          <div v-else-if="scope.row.cityCode == '0856'">铜仁</div>
          <div v-else-if="scope.row.cityCode == '0857'">毕节</div>
          <div v-else-if="scope.row.cityCode == '0858'">六盘水</div>
          <div v-else>黔西南</div>
        </template>
      </el-table-column>
      <el-table-column
        prop="businessCode"
        label="企业"
        align="center"
        width="230px"
      >
      </el-table-column>
      <el-table-column prop="userCount" label="用户数" align="center">
      </el-table-column>
      <el-table-column
        prop="attch_ask_success_rate"
        label="附着成功率(%)"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="pdp_ask_success_rate"
        label="PDP成功率(%)"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="tcp_ask_success_rate"
        label="TCP成功率(%)"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="http_ask_success_rate"
        label="HTTP成功率(%)"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="tcp_create_time"
        label="TCP时延(ms)"
        align="center"
      >
        <template slot-scope="scope">
          <div>
            {{
              parseFloat(scope.row.tcp_create_time) +
                parseFloat(scope.row.tcp_suc_req_time)
            }}
          </div>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currpage"
      :page-sizes="[15, 50, 100, 200, 300]"
      :page-size="pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
  </div>
</template>

<script>
import { baseURL } from '../../utils/ipConfig'

export default {
  data() {
    return {
      total: 0,
      currentPage4: 1,
      currpage: 1,
      pagesize: 15,
      areaCode: '0851',
      tableData: [],
      options: [
        {
          label: '贵阳',
          value: '0851',
        },
        {
          label: '遵义',
          value: '0852',
        },
        {
          label: '安顺',
          value: '0853',
        },
        {
          label: '黔南',
          value: '0854',
        },
        {
          label: '黔东南',
          value: '0855',
        },
        {
          label: '铜仁',
          value: '0856',
        },
        {
          label: '毕节',
          value: '0857',
        },
        {
          label: '六盘水',
          value: '0858',
        },
        {
          label: '黔西南',
          value: '0859',
        },
      ],
      search: '',
    }
  },
  mounted() {
    this.getDataList()
  },
  methods: {
    getDataList() {
      let _this = this
      let params = new URLSearchParams()
      params.append('cityCode', _this.areaCode)
      params.append('pageNum', _this.currpage)
      params.append('pageSize', _this.pagesize)
      _this.$ajax
        .post(`${baseURL.ip1}/pc/getAllBusinessNameAnalysisDataList`, params)
        .then(function(res) {
          //请求成功
          let resData = res.data
          if (resData.code == 0) {
            _this.total = resData.count
            _this.tableData = resData.data
          }
        })
        .catch(function(error) {
          //请求失败
          console.log(error)
        })
    },
    // 页面条数切换
    handleSizeChange(val) {
      this.pagesize = val
      this.currpage = 1
      this.getDataList()
    },
    // 页码切换
    handleCurrentChange(val) {
      this.currpage = val
      this.getDataList()
    },
    //导出
    derive() {
      let _this = this
      require.ensure([], () => {
        const { export_json_to_excel } = require('../../vendor/Export2Excel')
        const tHeader = [
          '序号',
          '城市',
          '企业',
          '附着成功率(%)',
          'PDP成功率(%)',
          'TCP成功率(%)',
          'HTTP成功率(%)',
          'TCP时延(ms)',
        ]
        const filterVal = [
          'num',
          'cityCode',
          'businessCode',
          'attch_ask_success_rate',
          'pdp_ask_success_rate',
          'tcp_ask_success_rate',
          'http_ask_success_rate',
          'tcp_create_time',
        ]
        const list = _this.tableData
        const data = _this.formatJson(filterVal, list)
        export_json_to_excel(tHeader, data, '企业信息')
      })
      // this.$export.excel({
      //   title: "企业信息",
      //   columns: [
      //     { label: "序号", prop: "num" },
      //     { label: "城市", prop: "cityCode" },
      //     { label: "企业", prop: "businessCode" },
      //     { label: "附着成功率(%)", prop: "attch_ask_success_rate" },
      //     { label: "PDP成功率(%)", prop: "pdp_ask_success_rate" },
      //     { label: "TCP成功率(%)", prop: "tcp_ask_success_rate" },
      //     { label: "HTTP成功率(%)", prop: "http_ask_success_rate" },
      //     { label: "TCP时延(ms)", prop: "tcp_create_time" },
      //   ],
      //   data: this.tableData,
      // });
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map((v) => filterVal.map((j) => v[j]))
    },
    // 查询
    query() {
      let _this = this
      if (_this.search == '') {
        let params = new URLSearchParams()
        params.append('cityCode', _this.areaCode)
        params.append('pageNum', _this.currpage)
        params.append('pageSize', _this.pagesize)
        _this.$ajax
          .post(`${baseURL.ip1}/pc/getAllBusinessNameAnalysisDataList`, params)
          .then(function(res) {
            //请求成功
            let resData = res.data
            if (resData.code == 0) {
              _this.total = resData.count
              _this.tableData = resData.data
            }
          })
          .catch(function(error) {
            //请求失败
            console.log(error)
          })
      } else {
        let params = new URLSearchParams()
        params.append('queryStr', _this.search)
        params.append('cityCode', _this.areaCode)
        params.append('pageNum', _this.currpage)
        params.append('pageSize', _this.pagesize)
        _this.$ajax
          .post(`${baseURL.ip1}/pc/getAllBusinessNameAnalysisDataList`, params)
          .then(function(res) {
            //请求成功
            let resData = res.data
            if (resData.code == 0) {
              _this.total = resData.count
              _this.tableData = resData.data
            }
          })
          .catch(function(error) {
            //请求失败
            console.log(error)
          })
      }
    },
  },
}
</script>

<style scoped>
/* 标题 */
.title {
  padding: 0 1vw;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.title h1 {
  height: 4vh;
  line-height: 4vh;
  font-size: 18px;
  font-family: Microsoft YaHei, Microsoft YaHei-Regular;
  font-weight: 400;
}
.search_box {
  display: flex;
  flex-flow: row nowrap;
}
.search {
  height: 3vh;
  padding: 5px;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  background: url('../../assets/image/rectangle6.png') no-repeat;
  background-size: 100% 100%;
  margin-right: 5px;
}
.search input::placeholder {
  color: #005185;
}
.search input {
  width: 14vw;
  height: 4vh;
  padding-left: 3px;
  font-size: 16px;
  font-family: Microsoft YaHei, Microsoft YaHei-Regular;
  font-weight: 400;
}
</style>
